<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红绿灯倒计时</title>
    <style>
        #box {
            margin: 0 auto;
            width: 250px;
            height: 60px;
            border: 2px solid rgb(184, 182, 182);
            border-radius: 10px;
        }
        
        #red,
        #yellow,
        #green {
            float: left;
            width: 40px;
            height: 40px;
            border: 1px solid gray;
            border-radius: 30px;
            margin-left: 5px;
            margin-top: 10px;
            background-color: rgb(236, 235, 235);
        }
        
        #red {
            margin-left: 20px;
        }
        
        #count {
            float: left;
            font-size: 40px;
            margin-left: 20px;
            margin-top: 5px;
            color: gray;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="red"></div>
        <div id="yellow"></div>
        <div id="green"></div>
        <div id="count"></div>
    </div>
    <script>
        var lamp = {
            red: {
                obj: document.getElementById('red'),
                timeout: 30,
                style: ['red', ' rgb(236, 235, 235)', ' rgb(236, 235, 235)'],
                next: 'green'
            },
            yellow: {
                obj: document.getElementById('yellow'),
                timeout: 5,
                style: ['rgb(236, 235, 235)', 'yellow', ' rgb(236, 235, 235)'],
                next: 'red'
            },
            green: {
                obj: document.getElementById('green'),
                timeout: 35,
                style: ['rgb(236, 235, 235)', ' rgb(236, 235, 235)', 'green'],
                next: 'yellow'
            }
        }
    </script>
</body>

</html>